<template>
    <div >
    <el-scrollbar :height="isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
      <zh-space style="padding-top: 10px">
        <api-register ref="functionPage"/>
      </zh-space>
    </el-scrollbar>
    <el-dialog
            ref="dialog"
            v-model="state.dialogVisible"
            title="参数设置"
            width="100%"
    >
        <zh-card shadow="hover" style="height: 100%">
            <zh-header-toolbar>
                <zh-button style="margin-left: 8px" button-type="add" @click="apiRootAdd">根目录新增</zh-button>
                <zh-button style="margin-left: 8px" button-type="add" @click="apiEqualAdd">同级新增</zh-button>
                <zh-button style="margin-left: 8px" button-type="add" @click="childApiAdd">子集新增</zh-button>
                <zh-button style="margin-left: 8px" button-type="save" @click="saveApi">保存修改</zh-button>
                <zh-button style="margin-left: 8px" button-type="del" @click="deleteApi">删除节点</zh-button>
            </zh-header-toolbar>
                 <el-tabs v-model="paramFromName" @tab-click="paramFromClick" :stretch="true" style="height: 100%">
                      <el-tab-pane label="请求头上信息" name="headerParam">
                 <api-params-register ref="apiParamsPage" :paramsInfo="paramsInfo" scroll-height="60vh"/>
                      </el-tab-pane>
                 <el-tab-pane label="请求url上信息" name="urlParam">
                      <api-params-register ref="apiParamsPage2" :paramsInfo="paramsInfo2" scroll-height="60vh"/>
                 </el-tab-pane>
                 <el-tab-pane label="请求体信息" name="bodyParam">
                      <api-params-register ref="apiParamsPage3" :paramsInfo="paramsInfo3" scroll-height="60vh"/>
                 </el-tab-pane>
            </el-tabs>
        </zh-card>
    </el-dialog>
    <el-dialog
            ref="dialog"
            v-model="state.dialogVisible2"
            title="参数设置"
            width="100%"
    >
        <zh-card shadow="hover" style="height: 100%">
            <zh-header-toolbar>
                <zh-button style="margin-left: 8px" button-type="add" @click="apiRootAdd">根目录新增</zh-button>
                <zh-button style="margin-left: 8px" button-type="add" @click="apiEqualAdd">同级新增</zh-button>
                <zh-button style="margin-left: 8px" button-type="add" @click="childApiAdd">子集新增</zh-button>
                <zh-button style="margin-left: 8px" button-type="save" @click="saveApi">保存修改</zh-button>
                <zh-button style="margin-left: 8px" button-type="del" @click="deleteApi">删除节点</zh-button>
            </zh-header-toolbar>
            <el-tabs v-model="paramFromName2" @tab-click="paramFromClick2" :stretch="true" style="height: 100%">
                <el-tab-pane label="请求头上信息" name="headerParam2">
                    <api-params-register ref="apiParamsPage4" :paramsInfo="paramsInfo4" scroll-height="60vh"/>
                </el-tab-pane>
                <el-tab-pane label="请求url上信息" name="urlParam2">
                    <api-params-register ref="apiParamsPage5" :paramsInfo="paramsInfo5" scroll-height="60vh"/>
                </el-tab-pane>
                <el-tab-pane label="请求体信息" name="bodyParam2">
                    <api-params-register ref="apiParamsPage6" :paramsInfo="paramsInfo6" scroll-height="60vh"/>
                </el-tab-pane>
            </el-tabs>
        </zh-card>
    </el-dialog>
    </div>
</template>

<script lang="ts" setup name="apiRegisterIndex">
import ApiRegister from '@/views/apiCenter/ApiRegister/component/ApiRegister.vue';
import ApiParamsRegister from '@/views/apiCenter/ApiRegister/component/ApiParamsForm.vue';
import {ElMessage, ElMessageBox} from 'element-plus';
//-------------------------------------------------------------------------------------------
const functionPage = ref();
const {isTagsview} = storeToRefs($store.theme);
const apiParamsPage = ref();
const apiParamsPage2 = ref();
const apiParamsPage3 = ref();
const apiParamsPage4 = ref();
const apiParamsPage5 = ref();
const apiParamsPage6 = ref();
const paramFromName = ref('headerParam');
const paramFromName2 = ref('headerParam2');
const state = reactive({
    //弹窗
    dialogVisible: false,
    dialogVisible2: false,
    //保存成功参数
    createParamsFlag:false,
});
//传子组件参数
const paramsInfo =ref({
    paramId:"",
    paramFrom:"header",
    paramType:"req",
    functionCode:"",
});
const paramsInfo2 =ref({
    paramId:"",
    paramFrom:"params",
    paramType:"req",
    functionCode:"",
});
const paramsInfo3 =ref({
    paramId:"",
    paramFrom:"body",
    paramType:"req",
    functionCode:"",
});
const paramsInfo4 =ref({
    paramId:"",
    paramFrom:"header",
    paramType:"res",
    functionCode:"",
});
const paramsInfo5 =ref({
    paramId:"",
    paramFrom:"params",
    paramType:"res",
    functionCode:"",
});
const paramsInfo6 =ref({
    paramId:"",
    paramFrom:"body",
    paramType:"res",
    functionCode:"",
});

//--------------------------定义调用方法--------------------------------------------------
function paramFromClick(){
    apiParamsPage.value.initParams();
    apiParamsPage2.value.initParams();
    apiParamsPage3.value.initParams();
}
function paramFromClick2(){
    apiParamsPage4.value.initParams();
    apiParamsPage5.value.initParams();
    apiParamsPage6.value.initParams();
}
const emit = defineEmits(['close']);
//------------------------添加接口表单到数据库---------------------
async function addForm(){
    //校验
    await functionPage.value.form.validate((valid) => {
    if (valid) {
      const functionDate: any =functionPage.value.apiInfo;
        if(!functionDate.funcTitle) {
            functionDate.funcTitle = '接口标题未定义';
        }
        if(!functionDate.funcType) {
            functionDate.funcType = 'query';
        }
        if(!functionDate.qps) {
            functionDate.qps = '10';
        }
        if(!functionDate.httpMethod) {
            functionDate.httpMethod = 'post';
        }
        if(!functionDate.customCharset) {
            functionDate.customCharset = 'utf-8';
        }
        if(!functionDate.contentType) {
            functionDate.contentType = 'application/json';
        }
        if(!functionDate.funcSourceType) {
            functionDate.funcSourceType = '2';
        }
        if(!functionDate.networkType) {
            functionDate.networkType = '1';
        }
        if(!functionDate.otherAccessFlag) {
            functionDate.otherAccessFlag = '1';
        }
        if(!functionDate.authFlag) {
            functionDate.authFlag = '0';
        }
        if(!functionDate.isEncode) {
            functionDate.isEncode = '0';
        }
        if(!functionDate.publicFlag) {
            functionDate.publicFlag = '1';
        }
        //保存数据
      ElMessageBox.confirm(
          '是否确认数据无误，进行保存?',
          '提示',
          {
            confirmButtonText: '保存',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
          }
      ).then(async () => {
        if (functionDate.funcTitle) {
          await $api.common.send.post('function0004', functionDate).then((res) => {
            $messageBox.success('新增成功，如要修改请移至接口管理', '提示');
            state.createParamsFlag = true;
            //传递事件给父组件
            emit('close', res.result)
          })
              .catch(() => {
              });
        }
        ElMessage({
          type: 'success',
          message: '接口注册成功，请进行维护接口参数',
        })
      })
          .catch(() => {

          })
    }
  });
}
//新增接口
function addApiForm(){
    //重置表单信息
    state.createParamsFlag=false;
    functionPage.value.resetForm();
    //------------更新functionCode的值----------------------------------
    $api.common.send.post('function0010', {}).then((res) => {
        functionPage.value.apiInfo.funcCode = res.result;
    });

}
//根目录新增
function apiRootAdd() {
    if(state.dialogVisible){
        if (paramFromName.value == 'headerParam') {
            apiParamsPage.value.apiRootAdd();
        } else if (paramFromName.value == 'urlParam') {
            apiParamsPage2.value.apiRootAdd();
        } else if (paramFromName.value == 'bodyParam') {
            apiParamsPage3.value.apiRootAdd();
        }
    }

    if (state.dialogVisible2){
        if (paramFromName2.value == 'headerParam2') {
            apiParamsPage4.value.apiRootAdd();
        } else if (paramFromName2.value == 'urlParam2') {
            apiParamsPage5.value.apiRootAdd();
        } else if (paramFromName2.value == 'bodyParam2') {
            apiParamsPage6.value.apiRootAdd();
        }
    }
}
//同级新增
function apiEqualAdd(){

    if(state.dialogVisible){
        if (paramFromName.value == 'headerParam') {
            apiParamsPage.value.apiEqualAdd();
        } else if (paramFromName.value == 'urlParam') {
            apiParamsPage2.value.apiEqualAdd();
        } else if (paramFromName.value == 'bodyParam') {
            apiParamsPage3.value.apiEqualAdd();
        }
    }

    if (state.dialogVisible2){
        if (paramFromName2.value == 'headerParam2') {
            apiParamsPage4.value.apiEqualAdd();
        } else if (paramFromName2.value == 'urlParam2') {
            apiParamsPage5.value.apiEqualAdd();
        } else if (paramFromName2.value == 'bodyParam2') {
            apiParamsPage6.value.apiEqualAdd();
        }
    }
}
//子集新增
function childApiAdd(){

    if(state.dialogVisible){
        if (paramFromName.value == 'headerParam') {
            apiParamsPage.value.childApiAdd();
        } else if (paramFromName.value == 'urlParam') {
            apiParamsPage2.value.childApiAdd();
        } else if (paramFromName.value == 'bodyParam') {
            apiParamsPage3.value.childApiAdd();
        }
    }
    if (state.dialogVisible2){
        if (paramFromName2.value == 'headerParam2') {
            apiParamsPage4.value.childApiAdd();
        } else if (paramFromName2.value == 'urlParam2') {
            apiParamsPage5.value.childApiAdd();
        } else if (paramFromName2.value == 'bodyParam2') {
            apiParamsPage6.value.childApiAdd();
        }
    }
}
//保存修改
function saveApi(){

    if(state.dialogVisible){
        if (paramFromName.value == 'headerParam') {
            apiParamsPage.value.saveApi();
        } else if (paramFromName.value == 'urlParam') {
            apiParamsPage2.value.saveApi();
        } else if (paramFromName.value == 'bodyParam') {
            apiParamsPage3.value.saveApi();
        }
    }
    if (state.dialogVisible2){
        if (paramFromName2.value == 'headerParam2') {
            apiParamsPage4.value.saveApi();
        } else if (paramFromName2.value == 'urlParam2') {
            apiParamsPage5.value.saveApi();
        } else if (paramFromName2.value == 'bodyParam2') {
            apiParamsPage6.value.saveApi();
        }
    }
}
//删除节点
function deleteApi(){

    if(state.dialogVisible){
        if (paramFromName.value == 'headerParam') {
            apiParamsPage.value.deleteApi();
        } else if (paramFromName.value == 'urlParam') {
            apiParamsPage2.value.deleteApi();
        } else if (paramFromName.value == 'bodyParam') {
            apiParamsPage3.value.deleteApi();
        }
    }
    if (state.dialogVisible2){
        if (paramFromName2.value == 'headerParam2') {
            apiParamsPage4.value.deleteApi();
        } else if (paramFromName2.value == 'urlParam2') {
            apiParamsPage5.value.deleteApi();
        } else if (paramFromName2.value == 'bodyParam2') {
            apiParamsPage6.value.deleteApi();
        }
    }
}
//----------添加请求参数--------
function paramsReqAdd(){
    if(state.createParamsFlag) {
        paramsInfo.value.functionCode = functionPage.value.apiInfo.funcCode;
        paramsInfo2.value.functionCode = functionPage.value.apiInfo.funcCode;
        paramsInfo3.value.functionCode = functionPage.value.apiInfo.funcCode;
        state.dialogVisible = true;
        state.dialogVisible2 = false;
        nextTick(() => {
            apiParamsPage.value.initParams();
        });
    }else{
        $messageBox.success('需要保存接口后，才能进行参数填写', '提示');
    }


}
//----------添加响应参数--------
function paramsResAdd(){
    if(state.createParamsFlag) {
        paramsInfo4.value.functionCode = functionPage.value.apiInfo.funcCode;
        paramsInfo5.value.functionCode = functionPage.value.apiInfo.funcCode;
        paramsInfo6.value.functionCode = functionPage.value.apiInfo.funcCode;
        state.dialogVisible2 = true;
        state.dialogVisible = false;
        nextTick(()=>{
            apiParamsPage4.value.initParams();
        });
    }else{
        $messageBox.success('需要保存接口后，才能进行参数填写', '提示');
    }

}

defineExpose({ addForm });
</script>
